<template>
  <div class="app-container">
    <el-row :gutter="20" >
      <el-col :xs="24" :lg="12" class="projectBox">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>项目列表</span>
            <el-button style="float: right; padding: 3px 0" type="text">编辑设置</el-button>
          </div>
          <tabale-list
            :table-list="tableList"
            :table-data ="tableData"/>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="12" ><div class="grid-content bg-purple"/>
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>项目列表</span>
            <el-button style="float: right; padding: 3px 0" type="text">编辑设置</el-button>
          </div>
          <tabale-list
            :table-list="tableList"
            :table-data ="tableData"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tabaleList from '@/components/tableList/tableList'
import { projectList } from '@/api/project'
export default {
  components: {
    tabaleList
  },
  data() {
    return {
      tableData: [],
      tableList: [
        { label: '项目名称', width: '240', data: 'project' },
        { label: '开始日期', data: 'startDate' },
        { label: '结束日期', data: 'endDate' },
        { label: '状态', data: 'state' },
        { label: '状态', data: 'state' }
      ]
    }
  },
  created() {
    this.handleCurrentChange()
  },
  methods: {
    // 当前页// 获取数据
    handleCurrentChange(val) {
      // this.loading = true
      // this.pageNo = val || this.pageNo
      console.log(val + '====')
      projectList({
        pageSize: 10,
        pageNo: 1
      }).then(res => {
        this.loading = false
        // debugger
        if (res.code === 20000) {
          console.log(res.data.data)
          this.tableData = res.data.data
        } else {
          console.log(res.code)
        }
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    }
  }

}
</script>

<style lang="scss" scoped>

.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  .clearfix{
    span{
      color: #101010;
      font-weight: 600;
      font-size: 18px;
    }
    .el-button--text{
      color: #3f51b5
    }
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .el-card{
    position: relative;
    top:0px;
    transition: top .2s;
    &:hover{
      //animation: animations 1s;
      top:-3px;
      box-shadow: 1px 3px 12px 0px#aaa;
    }
  }
  @keyframes animations{
    from{top:-5px;}
    to{
      top:-5px;
    }
  }
</style>
